<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <!-- <span style="color:#888888;">轮播图管理:</span> -->
      <el-button type="primary" size="medium" @click="setMeal('')" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="mealList" highlight-current-row class="el-table-style">
      <el-table-column prop="vip_package_name" label="套餐名称"></el-table-column>
      <el-table-column prop="bind_method" label="收费周期/月"></el-table-column>
      <el-table-column prop="vip_package_free" label="价格/元"></el-table-column>
      <el-table-column prop="vip_package_time" label="绑定时间"></el-table-column>
      <el-table-column prop="vip_package_end_time" label="到期时间"></el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button type="danger" class="danger-btn" size="mini" @click="delUserBindVipPackage(scope.row.id)">删除</el-button>
<!--          <el-button type="primary" size="mini" v-if="scope.row.is_exist == '1'" @click="setMeal(scope.row.vip_package_id)">编辑</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <!-- 绑定套餐弹窗 -->
    <el-dialog title="绑定套餐" :visible.sync="menuBandVisible" @close="initData">
      <div>已绑定套餐</div>
      <el-select v-model="bindMenuOption" clearable placeholder="请选择" style="margin:20px 0">
        <el-option
          v-for="item in bindMenuOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <div>套餐数量</div>
      <el-input-number v-model="MenuOptionNum" :min="1" label="套餐数量" style="margin: 20px 0"></el-input-number>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindMenu">发布</el-button>
      </div>
    </el-dialog>
    <!-- 绑定套餐弹窗end -->
  </div>
</template>

<script>
  export default {
    name: "user_meal",
    data(){
      return{
        menuBandVisible: false,
        mealList: [],
        bindMenuOptions: [],
        bindMenuOption: '',
        MenuOptionNum: 1,
        id: '',

      }
    },
    mounted() {
      this.id=this.$route.query.id;
      this.getUserRightsList();
      this.getUserDetail();
    },
    methods:{
      //删除套餐
      async delUserBindVipPackage(id){
        const res = await this.$api.delUserBindVipPackage({id: id})
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          });
          this.getUserDetail();
        }else {
          this.$message({
            type: 'warning',
            message: res.data.message
          });
        }
      },
      async getUserRightsList() {
        //付费套餐
        let res = await this.$api.getUserRightsList({type:'user'});
        if (res.data.level == 'success') {
          this.bindMenuOptions = res.data.data
        }
      },
      async getUserDetail(){
        let res = await this.$api.getUserDetail({id:this.id});
        if (res.data.level == 'success'){
          this.mealList = res.data.data.vip_package_list;
        }
      },
      setMeal(id){
        this.bindMenuOption = id;
        console.log(this.bindMenuOption)
        this.menuBandVisible = true;
      },
      async bindMenu(){
        let params = {
          user_id: this.id,
          vip_package_id: this.bindMenuOption,
          num: this.MenuOptionNum
        }
        const res = await this.$api.vipPackageBindUnit(params);
        if (res.data.level == 'success'){
          this.$message({
            type: 'success',
            message: res.data.message
          });
          this.getUserDetail();
          this.menuBandVisible = false;
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          });
        }
      },
      initData(){

      }
    }
  }
</script>

<style lang='scss' scoped>
  .banner {
    .action-bar {
      background-color: #f2f2f2;
      height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;

      .action-bar-input {
        width: 250px;
        margin-right: 14px;
      }
    }

    .el-table-style {
      width: 100%;
      border: 1px solid #f2f2f2;
    }

    .footer-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
    }

    .dialog-footer {
      text-align: center;
    }
  }
</style>
